<template>
  <div class="modal-main">
    <comCarInfoWrapper v-if="param_vin" :vin="param_vin" :subid="param_subid"></comCarInfoWrapper>
    <div class="modal-content" v-if="noticetype == 0">
      <div class="fg-carDetailBox">
        <div class="fg-title-div">
          <span class="icon-article-tip"></span>
          <span class="fg-title">基础信息</span>
        </div>
        <div class="table">
          <div class="table-row-group" v-for="(item, index) in basicinfo" :key="index">
            <ul class="table-row">
              <li class="table-cell-key">{{ item.Key }}</li>
              <li class="table-cell-value">{{ item.Value }}</li>
            </ul>
          </div>
        </div>
        <div class="gotoOilchangeflow-view" align="center" v-if="flowid > 0">
          <a @click="gotoOilchangeflow(flowid)" class="gotoflow">
            <span>特别说明</span>
            <img class="icon" src="../assets/images/arrow-circle-right.png" alt="查看换油流程参考方法" />
          </a>
        </div>
      </div>
      <div class="fg-basicinfo">
        <div class="fg-title"></div>
      </div>
      <div class="fg-carDetailBox" v-for="(item, index) in details" :key="index">
        <div class="fg-carDetailBox-item">
          <div class="fg-title-div">
            <span class="icon-article-tip"></span>
            <span class="fg-title">{{ item.description }}</span>
          </div>
          <div style="text-align: center;">
            <img class="lusir-common_cursor" mode="aspectFit" style="width: auto; object-fit: contain; max-width: 100%; max-height: 6.4rem; margin: .15rem auto 0;"
              @click="previewImage(oneImage.small)" v-for="(oneImage, oneIndex) in item.images" :key="oneIndex" :src="oneImage.small" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import comCarInfoWrapper from '@/components/com-carInfo-wrapper';
export default {
  components: {
    comCarInfoWrapper
  },
  data() {
    return {
      param_vin: this.$com_util.getQueryString("vin"), //VIN码
      param_subid: this.$com_util.getQueryString("subid"), //SubId车型编号
      param_transid: this.$com_util.getQueryString("tid"), //文章编号
      param_skip: this.$com_util.getQueryString("skip"), //自动跳转
      userParam: "", //用户选择参数
      flowid: 0,
      basicinfo: [], // 基础信息
      details: [], // 变速箱油文章详细
      noticetype: 0,
      noticemsg: ""
    };
  },
  computed: {
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  created() {
    this.userParam = decodeURI(this.$route.query.p || "");
    this.initPage();

  },
  methods: {
    async initPage() {
      const res = await this.$imServive({
        url: "/Auto/GetTransmissionOil",
        data: {
          transId: this.param_transid,
          vinCode: this.param_vin,
          autoModelSubId: this.param_subid,
          userParam: this.userParam ? JSON.parse(this.userParam) : []
        },
      });
      this.noticetype = 0;
      this.flowid = res.oilchangeflowid;
      this.basicinfo = res.basicinfo;
      this.details = res.details;
    },
    previewImage(src) {
      this.$wx.previewImage({
        images: [
          src,
        ],
        closeable: true,
      });
    },
    gotoOilchangeflow: function (flowid) {
      this.$router.push({
        path: "/OilChangeFlow",
        query: {
          tid: flowid,
          vin: this.param_vin,
          subid: this.param_subid
        }
      })
    }
  }
};
</script>
<style scoped>
.gotoflow {
  background-image: linear-gradient(to right, #ff4b70 0%, #f60000 100%);
  width: 4.2rem;
  margin-top: 0.45rem;
  height: 1rem;
  color: #fff;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.gotoflow span {
  height: 0.36rem;
  display: flex;
  align-items: center;
}
.gotoflow .icon {
  width: 0.36rem;
  height: 0.36rem;
  margin-left: 0.16rem;
  vertical-align: middle;
}
.fg-title-div {
  line-height: 1rem;
  color: #333;
  position: relative;
}
.fg-title {
  font-size: 0.4rem;
  font-weight: 600;
}
.icon-article-tip {
  background-image: url("../assets/images/icon-article-tip.png");
  background-repeat: no-repeat;
  background-size: 0.16rem 0.32rem;
  background-position: center;
  width: 0.16rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
  left: -0.8em;
  line-height: 1rem;
  position: absolute;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.table {
  display: table;
  border-collapse: collapse;
  border: 0.013333333333333334rem solid #ccc;
  width: 100%;
}
.table-caption {
  display: table-caption;
  margin: 0;
  padding: 0;
  font-size: 0.21333333333333335rem;
}
.table-column-group {
  display: table-column-group;
}
.table-column {
  display: table-column;
  width: 1.3333333333333333rem;
}
.table-row-group {
  display: table-row-group;
}
.table-row {
  display: table-row;
}
.table-row-group .table-row:hover,
.table-footer-group .table-row:hover {
  background: #f6f6f6;
}
.table-cell-key {
  display: table-cell;
  padding: 0 0.2rem;
  border: 0.013333333333333334rem solid #ccc;
  height: 1rem;
  width: 3rem;
  vertical-align: middle;
  color: #8e8e8e;
  background-color: #f6f6f6;
}
.table-cell-value {
  display: table-cell;
  padding: 0.12rem 0.2rem;
  border: 0.013333333333333334rem solid #ccc;
  vertical-align: middle;
}
.table-header-group {
  display: table-header-group;
  background: #eee;
  font-weight: bold;
}
.table-footer-group {
  display: table-footer-group;
}
.modal-main {
  width: 100%;
  background-color: #fff;
  bottom: 0;
  left: 0;
  border-radius: 0.2rem 0.2rem 0 0;
  overflow: hidden;
  height: 100vh;
}
.modal-content {
  flex: 1;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  height: calc(100vh - 2.45rem);
}
.clearfix:after {
  content: "";
  /*设置内容为空*/
  height: 0;
  /*高度为0*/
  line-height: 0;
  /*行高为0*/
  display: block;
  /*将文本转为块级元素*/
  visibility: hidden;
  /*将元素隐藏*/
  clear: both;
  /*清除浮动*/
}
.clearfix {
  zoom: 1;
  /*为了兼容IE*/
}
.fg-carDetailBox {
  padding: 0 0.32rem 0.32rem;
}
.fg-carDetailBox-item {
  width: 100%;
  height: auto;
  display: block;
}
.gotoOilchangeflow-view {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
